fe/pages/novel/[slug].tsx

import type { NextPage } from "next";
import Link from "next/link";
import NovelCover from "../../components/NovelCover";
import NovelItem from "../../components/NovelItem";
import styles from "../../styles/novel-info.module.scss";

const Novel: NextPage = () => {
  return (
    <main>
      <div
        className={styles["novel-wrap"]}
        style={{
          backgroundImage:
            "url(https://www.wuxiaworld.com/cdn-cgi/image/fit=contain,quality=75,format=auto/https://cdn.wuxiaworld.com/images/covers/og.jpg?ver=362f12103bcf1ea3fc048174300b89a65643336b)",
        }}
      >
        <div className={styles["novel-container"]}>
          <p className={styles["crumbs"]}>
            <Link href="/">
              <a title="home" className="">
                <svg>
                  <use xlinkHref="/icons.svg#home"></use>
                </svg>
              </a>
            </Link>
            <span>/</span>
            <a href="/stories/novel-fantasy-male" className="" title="Fantasy">
              Fantasy
            </a>
            <span>/</span> <span>Supreme Harem God System</span>
          </p>
          <div className={styles["novel-info"]}>
            <NovelCover
              className={styles["novel-info-cover"]}
              component="div"
            />
            <div className={styles["nove-info-body"]}>
              <h1>
                Supreme Harem God System
                <small>Completed</small>
              </h1>
              <h2>
                <a title="Fantasy" href="/stories/novel-fantasy-male">
                  <svg>
                    <use xlinkHref="/icons.svg#paper"></use>
                  </svg>
                  <span>Fantasy</span>
                </a>
                <strong>
                  <svg>
                    <use xlinkHref="/icons.svg#chapter"></use>
                  </svg>
                  <span>438 Chapters</span>
                </strong>
                <strong>
                  <svg>
                    <use xlinkHref="/icons.svg#eye"></use>
                  </svg>
                  <span>3.9M Views</span>
                </strong>
              </h2>
              <div className={styles["btns"]}>
                <a href="" className={styles["button"]}>
                  Start Reading
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="container bg-paper py-3">
        <div className="tabs">
          <button className="tab active">About</button>
          <button className="tab">Chapters</button>
        </div>
        <h2 className="sub-title">Tags</h2>
        <div className="tags">
          {[
            "Chinese",
            "Romance",
            "Fantasy",
            "Comedy",
            "Mystery",
            "Xuanhuan",
            "Action",
            "Virtual Reality",
            "Crafting",
            "Modern Setting",
            "Superpowers",
            "Political Intrigue",
          ].map((item) => (
            <a href="" className="tag" key={item}>
              {item}
            </a>
          ))}
        </div>
        <h2 className="sub-title">Synopsis</h2>
        <p>The Age of Gods has long since ended, their voices no longer heard on the continent of Douluo. Humanity, standing on the shoulders of legends from its history, advanced soul technology to inconceivable heights. The humans of Douluo invented weapons of mass destruction, mechanized armor, and living metals. With these advancements, they went on to conquer the oceans and discovered two new continents. To fuel these new technologies, humanity hunted the soul beasts to the very brink of extinction. </p>
        <p>Once the dominant force of Douluo, the few surviving soul beasts now hide in the darkest recesses of their last sanctuary. The weakest have all been hunted, leaving only the strongest to scheme in the heart of the forest. The soul beasts, not willing to fade away, plot an uprising for their survival. In the midst of this, a god from a long forgotten era awakens in the depths of the Great Star Dou Forest to seek vengeance for the soul beasts. </p>
        <p>As darkness encroaches from the abyss, hope is found in a young boy who holds a power beyond divinity within himself—Tang Wulin! Hope for both humanity and the soul beasts, as the bridge between the two. He finds his way into the fabled halls of Shrek Academy, where he learns to wield his prodigious powers, makes friends and finds allies, eventually rising to become a towering leader. </p>
        <p>As he learns to harness his strength, danger lurks within the shadows as the various factions of humanity maneuver and plot to usurp Shrek Academy. Tang Wulin discovers the threat to the only world he knows as he sinks deeper into the intrigue. Meanwhile, camouflaged by the chaos and unbeknownst to the humans, the soul beasts’ plot continues to steadily advance.</p>
        <p>To defend what he loves and reclaim what was lost, Tang Wulin must seek out the legacies of legends past and unlock the full might of the Golden Dragon King!</p>
      </div>
    </main>
  );
};

export default Novel;